<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>违法信息管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
    <style>
        #area-picker .layui-input-block {margin-bottom: 15px;}
        .layuimini-main .layui-table-cell { padding: 0 5px; }
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <fieldset class="table-search-fieldset">
            <legend>违法信息检索</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="">
                    <div class="layui-form-item" pane="">
                        <label class="layui-form-label">当日/历史</label>
                        <div class="layui-input-block">
                          <input type="radio" name="ifToday" value="当日违法信息检索" title="当日违法信息检索" checked=""><div class="layui-unselect layui-form-radio layui-form-radioed"><i class="layui-anim layui-icon"></i><div>当日违法信息检索</div></div>
                          <input type="radio" name="ifToday" value="历史违法信息检索" title="历史违法信息检索"><div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i><div>历史违法信息检索</div></div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">按编号</label>
                            <div class="layui-input-inline">
                                <input type="text" name="username" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-inline">
                                <button type="submit" class="layui-btn layui-btn-primary"  lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">按车牌号</label>
                            <div class="layui-input-inline">
                                <input type="text" name="sex" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-inline">
                                <button type="submit" class="layui-btn layui-btn-primary"  lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">日期范围</label>
                            <div class="layui-input-inline" lay-key="7">
                                <input type="text" autocomplete="off" class="layui-input" id="single-date" placeholder=" - " lay-key="11">
                            </div>
                            <div class="layui-inline">
                                <button type="submit" class="layui-btn layui-btn-primary" lay-submit="" lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">违法类型</label>
                            <div class="layui-input-inline">
                                <input type="text" name="sex" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-inline">
                                <button type="submit" class="layui-btn layui-btn-primary"  lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">车速范围</label>
                            <div class="layui-input-inline" style="width: 82.5px;">
                              <input type="text" name="price_min" placeholder="km/h" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-form-mid">-</div>
                            <div class="layui-input-inline" style="width: 82.5px;">
                              <input type="text" name="price_max" placeholder="km/h" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-inline">
                                <button type="submit" class="layui-btn layui-btn-primary" lay-submit="" lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item" id="area-picker">
                        <div class="layui-inline">
                            <label class="layui-form-label">省市县</label>
                            <div class="layui-input-block">
                                <div class="layui-input-inline" style="width: 160px;">
                                    <select name="province" class="province-selector" data-value="湖南省" lay-filter="province-1"><option value="">--选择省--</option><option value="北京市">北京市</option><option value="天津市">天津市</option><option value="河北省">河北省</option><option value="山西省">山西省</option><option value="内蒙古自治区">内蒙古自治区</option><option value="辽宁省">辽宁省</option><option value="吉林省">吉林省</option><option value="黑龙江省">黑龙江省</option><option value="上海市">上海市</option><option value="江苏省">江苏省</option><option value="浙江省">浙江省</option><option value="安徽省">安徽省</option><option value="福建省">福建省</option><option value="江西省">江西省</option><option value="山东省">山东省</option><option value="河南省">河南省</option><option value="湖北省">湖北省</option><option value="湖南省">湖南省</option><option value="广东省">广东省</option><option value="广西壮族自治区">广西壮族自治区</option><option value="海南省">海南省</option><option value="重庆市">重庆市</option><option value="四川省">四川省</option><option value="贵州省">贵州省</option><option value="云南省">云南省</option><option value="西藏自治区">西藏自治区</option><option value="陕西省">陕西省</option><option value="甘肃省">甘肃省</option><option value="青海省">青海省</option><option value="宁夏回族自治区">宁夏回族自治区</option><option value="新疆维吾尔自治区">新疆维吾尔自治区</option><option value="台湾省">台湾省</option><option value="香港特别行政区">香港特别行政区</option><option value="澳门特别行政区">澳门特别行政区</option><option value="海外">海外</option></select><div class="layui-unselect layui-form-select"><div class="layui-select-title"><input type="text" placeholder="--选择省--" value="广东省" readonly="" class="layui-input layui-unselect"><i class="layui-edge"></i></div><dl class="layui-anim layui-anim-upbit" style=""><dd lay-value="" class="layui-select-tips">--选择省--</dd><dd lay-value="北京市" class="">北京市</dd><dd lay-value="天津市" class="">天津市</dd><dd lay-value="河北省" class="">河北省</dd><dd lay-value="山西省" class="">山西省</dd><dd lay-value="内蒙古自治区" class="">内蒙古自治区</dd><dd lay-value="辽宁省" class="">辽宁省</dd><dd lay-value="吉林省" class="">吉林省</dd><dd lay-value="黑龙江省" class="">黑龙江省</dd><dd lay-value="上海市" class="">上海市</dd><dd lay-value="江苏省" class="">江苏省</dd><dd lay-value="浙江省" class="">浙江省</dd><dd lay-value="安徽省" class="">安徽省</dd><dd lay-value="福建省" class="">福建省</dd><dd lay-value="江西省" class="">江西省</dd><dd lay-value="山东省" class="">山东省</dd><dd lay-value="河南省" class="">河南省</dd><dd lay-value="湖北省" class="">湖北省</dd><dd lay-value="湖南省" class="">湖南省</dd><dd lay-value="广东省" class="layui-this">广东省</dd><dd lay-value="广西壮族自治区" class="">广西壮族自治区</dd><dd lay-value="海南省" class="">海南省</dd><dd lay-value="重庆市" class="">重庆市</dd><dd lay-value="四川省" class="">四川省</dd><dd lay-value="贵州省" class="">贵州省</dd><dd lay-value="云南省" class="">云南省</dd><dd lay-value="西藏自治区" class="">西藏自治区</dd><dd lay-value="陕西省" class="">陕西省</dd><dd lay-value="甘肃省" class="">甘肃省</dd><dd lay-value="青海省" class="">青海省</dd><dd lay-value="宁夏回族自治区" class="">宁夏回族自治区</dd><dd lay-value="新疆维吾尔自治区" class="">新疆维吾尔自治区</dd><dd lay-value="台湾省" class="">台湾省</dd><dd lay-value="香港特别行政区" class="">香港特别行政区</dd><dd lay-value="澳门特别行政区" class="">澳门特别行政区</dd><dd lay-value="海外" class="">海外</dd></dl></div>
                                </div>
                                <div class="layui-input-inline" style="width: 160px;">
                                    <select name="city" class="city-selector" data-value="长沙市" lay-filter="city-1"><option value="">--选择市--</option><option value="广州市">广州市</option><option value="韶关市">韶关市</option><option value="深圳市">深圳市</option><option value="珠海市">珠海市</option><option value="汕头市">汕头市</option><option value="佛山市">佛山市</option><option value="江门市">江门市</option><option value="湛江市">湛江市</option><option value="茂名市">茂名市</option><option value="肇庆市">肇庆市</option><option value="惠州市">惠州市</option><option value="梅州市">梅州市</option><option value="汕尾市">汕尾市</option><option value="河源市">河源市</option><option value="阳江市">阳江市</option><option value="清远市">清远市</option><option value="东莞市">东莞市</option><option value="中山市">中山市</option><option value="潮州市">潮州市</option><option value="揭阳市">揭阳市</option><option value="云浮市">云浮市</option></select><div class="layui-unselect layui-form-select"><div class="layui-select-title"><input type="text" placeholder="--选择市--" value="深圳市" readonly="" class="layui-input layui-unselect"><i class="layui-edge"></i></div><dl class="layui-anim layui-anim-upbit" style=""><dd lay-value="" class="layui-select-tips">--选择市--</dd><dd lay-value="广州市" class="">广州市</dd><dd lay-value="韶关市" class="">韶关市</dd><dd lay-value="深圳市" class="layui-this">深圳市</dd><dd lay-value="珠海市" class="">珠海市</dd><dd lay-value="汕头市" class="">汕头市</dd><dd lay-value="佛山市" class="">佛山市</dd><dd lay-value="江门市" class="">江门市</dd><dd lay-value="湛江市" class="">湛江市</dd><dd lay-value="茂名市" class="">茂名市</dd><dd lay-value="肇庆市" class="">肇庆市</dd><dd lay-value="惠州市" class="">惠州市</dd><dd lay-value="梅州市" class="">梅州市</dd><dd lay-value="汕尾市" class="">汕尾市</dd><dd lay-value="河源市" class="">河源市</dd><dd lay-value="阳江市" class="">阳江市</dd><dd lay-value="清远市" class="">清远市</dd><dd lay-value="东莞市" class="">东莞市</dd><dd lay-value="中山市" class="">中山市</dd><dd lay-value="潮州市" class="">潮州市</dd><dd lay-value="揭阳市" class="">揭阳市</dd><dd lay-value="云浮市" class="">云浮市</dd></dl></div>
                                </div>
                                <div class="layui-input-inline" style="width: 160px;">
                                    <select name="county" class="county-selector" data-value="天心区" lay-filter="county-1"><option value="">--选择区--</option><option value="罗湖区">罗湖区</option><option value="福田区">福田区</option><option value="南山区">南山区</option><option value="宝安区">宝安区</option><option value="龙岗区">龙岗区</option><option value="盐田区">盐田区</option><option value="龙华区">龙华区</option><option value="坪山区">坪山区</option></select><div class="layui-unselect layui-form-select"><div class="layui-select-title"><input type="text" placeholder="--选择区--" value="龙岗区" readonly="" class="layui-input layui-unselect"><i class="layui-edge"></i></div><dl class="layui-anim layui-anim-upbit" style=""><dd lay-value="" class="layui-select-tips">--选择区--</dd><dd lay-value="罗湖区" class="">罗湖区</dd><dd lay-value="福田区" class="">福田区</dd><dd lay-value="南山区" class="">南山区</dd><dd lay-value="宝安区" class="">宝安区</dd><dd lay-value="龙岗区" class="layui-this">龙岗区</dd><dd lay-value="盐田区" class="">盐田区</dd><dd lay-value="龙华区" class="">龙华区</dd><dd lay-value="坪山区" class="">坪山区</dd></dl></div>
                                </div>
                            </div>
                            <div class="layui-input-block">
                                <input type="text" name="" placeholder="请选择所属交警大队行政区划" autocomplete="off" class="layui-input" id="my-area">
                            </div>
                            <div class="layui-input-block">
                                <input type="text" name="" placeholder="选择具体路口位置" autocomplete="off" class="layui-input" id="cur-cross">
                            </div>
                            <div class="layui-input-block">
                                <button type="submit" class="layui-btn layui-btn-primary"  lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                            </div>
                        </div>
                    </div>

                </form>
            </div>
        </fieldset>

        <script type="text/html" id="illegal-toolbar">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add" tooltip="添加新的违法信息"> 添加 </button>
            </div>
        </script>

        <table class="layui-hide" id="cur-illegal-table" lay-filter="cur-illegal-filter"></table>
        <script type="text/html" id="cur-illagal-bar">
            <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">校对</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
        </script>

    </div>
</div>
<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    layui.use(['form', 'table', 'laydate', 'layarea', 'tableSelect'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            laydate = layui.laydate,
            layarea = layui.layarea,
            tableSelect = layui.tableSelect;
        
        /**
         * 时间范围选择
         **/
         laydate.render({
            elem: '#single-date',
            // 设置开始日期、日期日期的 input 选择器
            // 数组格式为 2.6.6 开始新增，之前版本直接配置 true 或任意分割字符即可
            type: 'datetime',
            range: true
        });

        layarea.render({
            elem: '#area-picker',
            data: {
                province: '湖南省',
                city: '长沙市',
                county: '天心区',
            },
            change: function (res) {
                //选择结果
                console.log(res);
            }
        });

        /**
         * 所属交警大队、路口位置的下拉选取
         **/
         tableSelect.render({
            elem: '#my-area',	// 定义输入框input对象 必填
            checkedKey: 'id', // 表格的唯一建值，非常重要，影响到选中状态 必填
            searchKey: 'keyword',	// 搜索输入框的name值 默认keyword
            searchPlaceholder: '关键词搜索',	// 搜索输入框的提示文字 默认关键词搜索
            height: '350',  // 自定义高度
            width: '350',  // 自定义宽度
            table: {	// 定义表格参数，与LAYUI的TABLE模块一致，只是无需再定义表格elem
                url: '../api/areaSelect.json',
                cols: [[
                    { type: 'radio' },
                    { field: 'id', title: '编号' },
                    { field: 'username', title: '交警大队' },
                    { field: 'addr', title: '地址' }
                ]]
            },
            done: function (elem, data) {
                // 选择完后的回调，包含2个返回值 elem:返回之前input对象；data:表格返回的选中的数据 []
                // 拿到data[]后 就按照业务需求做想做的事情啦~比如加个隐藏域放ID...
                var NEWJSON = []
                layui.each(data.data, function (index, item) {
                    NEWJSON.push(item.username)
                })
                elem.val(NEWJSON.join(","))
            }
        });
        tableSelect.render({
            elem: '#cur-cross',	// 定义输入框input对象 必填
            checkedKey: 'id', // 表格的唯一建值，非常重要，影响到选中状态 必填
            searchKey: 'keyword',	// 搜索输入框的name值 默认keyword
            searchPlaceholder: '关键词搜索',	// 搜索输入框的提示文字 默认关键词搜索
            height: '350',  // 自定义高度
            width: '350',  // 自定义宽度
            table: {	// 定义表格参数，与LAYUI的TABLE模块一致，只是无需再定义表格elem
                url: '../api/cross.json',
                cols: [[
                    { type: 'radio' },
                    { field: 'id', title: '编号' },
                    { field: 'addr', title: '地址' }
                ]]
            },
            done: function (elem, data) {
                // 选择完后的回调，包含2个返回值 elem:返回之前input对象；data:表格返回的选中的数据 []
                // 拿到data[]后 就按照业务需求做想做的事情啦~比如加个隐藏域放ID...
                var NEWJSON = []
                layui.each(data.data, function (index, item) {
                    NEWJSON.push(item.addr)
                })
                elem.val(NEWJSON.join(","))
            }
        });

        /**
         * 违章违法信息收集表
         **/
        table.render({
            elem: '#cur-illegal-table',
            url: '../api/allIllegal.json',
            toolbar: '#illegal-toolbar',
            defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            cols: [[
                {type: "checkbox", minWidth: 50},
                {field: 'id', minWidth: 63, title: '编号', sort: true},
                {field: 'license', minWidth: 80, title: '车牌号'},
                {field: 'licenseType', minWidth: 89, title: '车牌类型', sort: true},
                {field: 'time', minWidth: 131, title: '违法时间', align:'center', sort: true},
                {field: 'illegalType', minWidth: 66, title: '违法类型'},
                {field: 'illegalDscn', minWidth: 123, title: '违法描述'},
                {field: 'carDscn', minWidth: 169, title: '车辆描述'},
                {field: 'licenseScreen', minWidth: 116, title: '车牌截图', align:'center', templet: function(imgData) {
                    return '<img src="' + imgData.licenseScreen + '" style="width:100%; height:25px;"/>';
                }},
                {field: 'speed', minWidth: 65, title: '车速', sort: true},
                {field: 'direction', minWidth: 60, title: '方向'},
                {field: 'lane', minWidth: 60, title: '车道'},
                {field: 'area', minWidth: 60, title: '区划'},
                {field: 'position', minWidth: 60, title: '路口'},
                {title: '操作', minWidth: 100, toolbar: '#cur-illagal-bar', align: "center"}
            ]],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 15,
            page: true,
            skin: 'line'
        });
        
        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            var result = JSON.stringify(data.field);
            layer.alert(result, {
                title: '最终的搜索信息'
            });

            //执行搜索重载
            table.reload('cur-illegal-table', {
                page: {
                    curr: 1
                }
                , where: {
                    searchParams: result
                }
            }, 'data');

            return false;
        });

        /**
         * toolbar监听事件
         */
        table.on('toolbar(cur-illegal-filter)', function (obj) {
            if (obj.event === 'add') {  // 监听添加操作
                var childPage;
                var index = layer.open({
                    title: '添加违法信息',
                    type: 2,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: ['100%', '100%'],
                    content: '../page/illegal-entry.html',
                    success: function(layerdoc, index) {
                        // success会携带两个参数，分别是当前层DOM、当前层索引。
                        // 获取新开的iframe的body dom
                        childPage = layer.getChildFrame('body', index);
                    }
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
            } else if (obj.event === 'delete') {  // 监听删除操作
                var checkStatus = table.checkStatus('cur-illegal-table')
                    , data = checkStatus.data;
                layer.alert(JSON.stringify(data));
            }
        });

        //监听表格复选框选择
        table.on('checkbox(cur-illegal-filter)', function (obj) {
            console.log(obj)
        });

        table.on('tool(cur-illegal-filter)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                var index = layer.open({
                    title: '校对系统记录的违法信息',
                    type: 2,
                    shade: 0.2,
                    maxmin: true,
                    shadeClose: true,
                    area: ['100%', '100%'],
                    content: '../page/table/single-check.html',
                    success: function(layerdoc, index) {
                        // success会携带两个参数，分别是当前层DOM、当前层索引。
                        // 获取新开的iframe的body dom
                        var body = layer.getChildFrame('body', index);
                        (function(data, bodydoc) {
                            Object.keys(data).forEach(function(key) {
                                if (key == 'licenseScreen') {
                                    bodydoc.find('#licenseScreen').attr('src', data[key]);
                                }
                                bodydoc.find('.'+key).val(data[key]);
                            })
                        })(data, body);
                    }
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
                return false;
            } else if (obj.event === 'delete') {
                layer.confirm('确认删除？该操作不可撤回！', function (index) {
                    obj.del();
                    layer.close(index);
                });
            }
        });

    });
</script>

</body>
</html>